Hi there @bjarnef, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

@iOvergaard @leekelleher how can I reference/query <code> DOM element here? I tried using ref and query element in shadow DOM.

Or perhaps is can be it can query similar to this (although I couldn't find the id searching the repository):

I think it is possible to register e.g. "Umbraco" as class to be highlighted in Monarch, but anyway it would be great for HTML, CSS, JS, JSON, XML etc.
https://microsoft.github.io/monaco-editor/monarch.html

We can probably also use the uui-button-copy-text component here now:
https://uui.umbraco.com/?path=/docs/uui-button-copy-text--docs

When I formatted the existing element with slotted content, it seems to apply, but with empty content in the wrapping HTML elements.

However when I use monaco.editor.colorize(this.textContent, "csharp") it seems to work - expect when slotted content updates in template query builder, which doesn't seem to re-render.

https://stackoverflow.com/a/53162251

@warrenbuckley since you previously have worked with Monaco editor, perhaps you have some ideas for this? 😊
If you want to play around with this, feel free to have a look and commit any suggestions 😎

It seems I first needed to call colorizeElement() which includes the CSS for the wrapping HTML elements, but the slotted content wasn't rendered.

If I call colorize() afterwards it insert the HTML inclusive the actual text and the wrapping HTML elements are styled.

For JSON it may need a bit more configuration.

It seems it is also possible to use shiki to customize highlighter further:
https://shiki.matsu.io/packages/monaco

Hi @bjarnef!

Thanks for starting this PR - and the related discussion #16706.

I'll reach out to HQ just to make sure things are discussed before you do much more, in case any changes are needed.

Thanks

Emma

Hi @bjarnef looks good, so feel free to conitnue.

We do need to keep rendering performance in mind, so it may be worth investigating if the slottet content/aka. the not colourized content could be kept out of the rendering, and only rendering it once it has been colourized.

I would love to help, but for the coming period this is not of highest priority so just notice this will first get attention from me later.

But keep up the good work and I'm 100% sure this is something we like to get in, so lets make sure it gets into a good state and can take part in the project :-)